<template>
	<view class="content">
		<!--  最新体重  -->
		<view class="new_weight" :style="{backgroundColor: mainColor}">
			<view class="new_weight_number">{{weightList.length > 0 ? weightList[0].weight : '0'}}</view>
			<view class="new_weight_unit">{{config.unit ? config.unit : '公斤'}}</view>
		</view>
		<!--  体重列表  -->
		<scroll-view scroll-y="true" :style="{height: scrollHeight + 'rpx'}" :refresher-enabled="false"
			:refresher-triggered="downPullFlag" :refresher-threshold="90" @refresherrefresh="refresherrefresh"
			@scrolltolower="scrolltolower">
			<view v-for="(item, index) in weightList" :key="_id" class="weight_item_out">
				<!--  年月日  -->
				<view class="weight_item_date">{{item.date}}</view>
				<!--  内容  -->
				<view class="weight_content_out">
					<view class="weight_time">
						<image class="sun_image" src="/static/image/page/index/sun.png"></image>
						<view class="time_text">{{item.time}}</view>
					</view>
					<view class="weight">
						<view class="weight_title">体重</view>
						<view class="weight_content">{{item.weight}}</view>
					</view>
					<image class="delete_image" src="/static/image/page/index/delete.png"
						@click="deleteWeightModal(item._id)"></image>
				</view>
			</view>
			<!--  分页提示  -->
			<view class="page_msg">{{pageMsg}}</view>
		</scroll-view>

		<!--  新增  -->
		<view class="insert_button" :style="{backgroundColor: mainColor}" @click="showForm">+</view>
		<!--  弹窗  -->
		<view v-if="showFormFlag" class="insert_form_out" @click.stop.prevent="">
			<view class="insert_form">
				<!--  标题  -->
				<view class="title_out">
					<view class="title">新增体重</view>
					<image class="close_image" src="/static/image/common/close.png" @click="showForm"></image>
				</view>
				<!--  时间  -->
				<view style="width: 100%;">
					<!--  日期  -->
					<view class="form_item">
						<picker class="form_item_date" mode="date" start="2015-09-01" end="2100-09-01"
							@change="changeDate">
							<view class="picker">
								<view class="item_left">日期:</view>
								<view>{{form.date}}</view>
							</view>
						</picker>
					</view>
					<!--  下划线  -->
					<view class="bottom_line"></view>
					<!--  时间  -->
					<view class="form_item">
						<picker class="form_item_date" mode="time" start="00:00" end="23:59" @change="changeTime">
							<view class="picker">
								<view class="item_left">时间:</view>
								<view>{{form.time}}</view>
							</view>
						</picker>
					</view>
					<!--  下划线  -->
					<view class="bottom_line"></view>
					<!--  体重  -->
					<view class="form_item">
						<view class="item_left">体重:</view><input class="input" v-model="form.weight"
							placeholder="请输入体重" />
					</view>

				</view>
				<view class="submit_button" :style="{backgroundColor: mainColor}" @click="submit">记录</view>
			</view>
		</view>

		<!--  底部导航栏  -->
		<bottom-navigation :navigationIndex="0"></bottom-navigation>
	</view>
</template>

<script>
	import {
		findWeightPageApi,
		addWeightApi,
		deleteWeightApi
	} from '@/api/weightApi.js'
	import {
		verifyPostNumber
	} from '@/utils/verifyUtil.js'
	import {
		getDate,
		getYear,
		getMonth,
		getDay,
		getHour,
		getMinute,
		getSecond,
		addDate
	} from '@/utils/dateUtil.js'
	import toastUtil from '@/utils/toastUtil.js'
	import userUtil from '@/utils/user/userUtil.js'
	import storageUtil from '../../utils/storageUtil.js'
	import configUtil from '../../utils/config/configUtil.js'

	// 获取应用实例
	const app = getApp()

	export default {
		data() {
			return {
				// 系统平台
				system: app.globalData.system,
				// 导航栏高度
				navigationHeight: app.globalData.navigationHeight,
				// 统一背景颜色
				unifyBgColor: app.globalData.unifyBgColor,
				// 顶部导航栏高度
				topNavigationHeight: app.globalData.topNavigationHeight,
				// 主色调
				mainColor: app.globalData.mainColor,
				// 主色调
				maxHeight: app.globalData.maxHeight,
				// 分页提示
				pageMsg: '没有更多了',
				// 分页提示 ---- 加载中
				pageMsgLoading: '加载中',
				// 分页提示 ---- 没有更多了
				pageMsgNone: '没有更多了',
				// 下拉刷新标志
				downPullFlag: false,
				// 上拉加载标志
				topPullFlag: false,
				// scroll view 高度
				scrollHeight: 500,
				// 表单
				form: {
					// 日期
					date: null,
					// 时间
					time: null,
					// 时间日期
					dateTime: null,
					// 体重
					weight: null
				},
				// 搜索表单
				searForm: {
					// 分页大小
					pageSize: 10,
					// 查询完毕
					overFlag: false
				},
				// 体重集合
				weightList: [],
				// 展示表单标志
				showFormFlag: false,
				// 配置信息
				config: {
					unit: '公斤'
				}
			}
		},
		onLoad() {
			// 开启微信内置分享功能
			// shareUtil.startShare()
			// 获取配置
			console.log('onload....')
			// 查询配置
			configUtil.getConfig().then((res) => {
				console.log('config res : ', res)
				this.config = storageUtil.getConfig()
			})

			// 获取胶囊信息
			let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
			// 初始化系统参数 最大高度
			uni.getSystemInfo({
				success: (res) => {
					console.log('系统参数 : ', res);
					// 设置最大的高度
					let windowHeight = res.windowHeight
					let windowWidth = res.windowWidth
					// 最大宽度(rpx)
					let maxHeight = (750 / windowWidth) * windowHeight
					this.maxHeight = maxHeight
					this.scrollHeight = this.maxHeight - this.navigationHeight - 200 - 2
					console.log('maxHeight : ', maxHeight)
				}
			});

			// 初始化时间
			this.initFormDate()

			userUtil.getOpenId().then(() => {
				this.findWeightPage()
			})
		

		},
		onShow() {
			console.log('onshow...')

		},
		// 页面的下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh.........')
			// 刷新数据
			this.findWeightPage()
		},
		methods: {
			// 分享给朋友
			onShareAppMessage() {
				return shareUtil.shareToFreind()
			},

			// 加载更多数据
			scrolltolower() {
				console.log('scrolltolower...........')
				this.findNextWeightPage()
			},

			// 下拉刷新
			refresherrefresh() {
				console.log('refresherrefresh...........')
				// 刷新数据
				this.findWeightPage()
			},

			/**
			 * 获取直播录像列表
			 * @param {*} page 第几页
			 * @param {*} callback 成功回调数据
			 */
			findWeightPage(page = 1, callback) {
				console.log('findWeightPage........')
				// 页数超过了
				let searForm = this.searForm
				searForm.skip = 0
				// uni.startPullDownRefresh()
				this.pageMsgToLoading()
				toastUtil.showLoading()
				let res = findWeightPageApi(searForm).then((res) => {
					// 成功
					if (res.code === 0) {
						console.log('res.data : ', res.data)
						this.weightList = res.data
					} else {
						console.log('findWeightPageApi   查询失败....')
					}
					console.log(" success res : ", res)
				}, (res) => {
					console.log(" fail res : ", res)
					toastUtil.showToast("查询体重列表失败!")
				}).finally((res) => {
					uni.stopPullDownRefresh()
					this.pageMsgToNone()
					toastUtil.hideLoading()
				})
			},

			//获取下一页直播录像列表
			findNextWeightPage() {
				console.log('findWeightPage........')
				// 页数超过了
				let searForm = this.searForm
				searForm.skip = this.weightList.length
				if (this.topPullFlag) {
					return
				}
				this.topPullFlag = true
				this.pageMsgToLoading()
				toastUtil.showLoading()
				let res = findWeightPageApi(searForm).then((res) => {
					// 成功
					if (res.code === 0) {
						console.log('res.data : ', res.data)
						this.weightList = this.weightList.concat(res.data)
					}
					console.log(" success res : ", res)
				}, (res) => {
					console.log(" fail res : ", res)
					toastUtil.showToast("查询体重列表失败!")
				}).finally((res) => {
					this.topPullFlag = false
					this.pageMsgToNone()
					toastUtil.hideLoading()
				})
			},

			// 切换成加载中
			pageMsgToLoading() {
				this.pageMsg = this.pageMsgLoading
			},
			// 切换成没有更多
			pageMsgToNone() {
				this.pageMsg = this.pageMsgNone
			},

			// 初始化时间
			initFormDate() {
				let form = this.form
				let date = new Date()
				let year = getYear(date)
				let month = getMonth(date)
				let day = getDay(date)
				let hour = getHour(date)
				let minute = getMinute(date)
				form.date = year + '-' + month + "-" + day
				form.time = hour + ":" + minute
				this.form = form
			},

			// 修改日期
			changeDate(e) {
				console.log('e : ', e)
				this.form.date = e.detail.value
			},
			// 修改时间
			changeTime(e) {
				console.log('e : ', e)
				this.form.time = e.detail.value
			},

			// 提交数据
			submit() {
				let form = this.form
				if (!verifyPostNumber(form.weight)) {
					toastUtil.showToast('请输入合法的体重')
					return
				}
				if (!form.date) {
					toastUtil.showToast('请选择日期')
					return
				}
				if (!form.time) {
					toastUtil.showToast('请选择时间')
					return
				}
				form.weight = parseFloat(form.weight)
				form.dateTime = getDate(form.date + " " + form.time + ":00")
				form.yearMonth = getYear(getDate(form.date + " " + form.time + ":00")) + "-" + getMonth(getDate(form.date +
					" " + form.time + ":00"))
				form.dateTimeStamp = form.dateTime.getTime()
				console.log('form : ', form)
				addWeightApi(form).then((data) => {
					console.log('success data : ', data)
					// 添加成功
					if (data.code === 0) {
						toastUtil.showToast('添加体重成功')
						this.showForm()
						this.resetForm()
						this.refresherrefresh()
						return
					}
				}, (data) => {
					console.log('reject data : ', data)
					toastUtil.showToast('添加体重失败')
				})

				//this.showForm()
			},

			// 展示表单
			showForm() {
				this.showFormFlag = !this.showFormFlag
			},



			// 重置表单
			resetForm() {
				this.form.weight = null
			},

			/**
			 * 删除体重
			 */
			deleteWeightModal(id) {
				console.log(id)
				uni.showModal({
					title: '删除提示',
					content: '请问是否要删除这条数据？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定')
							this.deleteWeight(id)
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			/**
			 * 删除体重
			 */
			deleteWeight(id) {

				deleteWeightApi(id).then((data) => {
					console.log('success data : ', data)
					// 删除体重成功
					toastUtil.showToast('删除体重成功')
					this.refresherrefresh()
				}, (data) => {
					console.log('reject data : ', data)
					toastUtil.showToast('删除体重失败，' + data.errMsg)
				})
			}
		}
	}
</script>

<style>
	.content {
		/* 		width: 100%;
		height: 100%; */
	}

	/*  最新体重 外部  */
	.new_weight {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200rpx;
		color: white;
	}

	/*  最新体重 数字  */
	.new_weight_number {
		font-size: 60rpx;
	}

	/*  最新体重 单位  */
	.new_weight_unit {
		padding-top: 18rpx;
	}

	/*  体重项  */
	.weight_item_out {
		padding-top: 10rpx;
		padding-bottom: 5rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
	}

	/*  日期  */
	.weight_item_date {
		padding-left: 20rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: small;
	}

	/*  体重项  */
	.weight_content_out {
		display: flex;
		align-items: center;
		height: 80rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		/* border: solid 1rpx rgb(200, 200, 200); */
		/*box-shadow:0px 3px 3px #c8c8c8 ;*/
		box-shadow: 0px 1px 3px #c8c8c8;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 5rpx;
		margin-bottom: 20rpx;
		width: calc(100% - 20rpx - 20rpx - 20rpx - 20rpx);
	}

	/*  时间项  */
	.weight_time {
		width: 100rpx;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	/*  太阳图片  */
	.sun_image {
		width: 50rpx;
		height: 50rpx;
	}

	/*  时间文本  */
	.time_text {
		padding-top: 10rpx;
		height: 20rpx;
		line-height: 20rpx;
		font-size: medium;
	}

	/*  体重内容  */
	.weight {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: calc(100% - 100rpx - 50rpx);
	}

	/*  体重标题  */
	.weight_title {
		font-size: x-small;
		height: 25rpx;
		line-height: 25rpx;
	}

	/*  体重值  */
	.weight_content {
		padding-top: 10rpx;
		font-size: large;
		height: 55rpx;
		line-height: 55rpx;
	}

	/*  删除图片  */
	.delete_image {
		width: 50rpx;
		height: 50rpx;
	}

	/*  新增按钮  */
	.insert_button {
		position: fixed;
		bottom: 190rpx;
		right: 90rpx;
		line-height: 80rpx;
		text-align: center;
		width: 80rpx;
		height: 80rpx;
		color: white;
		font-size: 50rpx;
		border-radius: 50%;
		box-shadow: 0px 5px 5px rgb(200, 200, 200);
	}

	/*  表单 外部*/
	.insert_form_out {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		color: rgb(0, 0, 0);
		z-index: 10;
	}

	/*  表单 */
	.insert_form {
		position: relative;
		width: 750rpx;
		height: 380rpx;

		background-color: white;
		z-index: 20;
	}

	/*  表单标题  */
	.title_out {
		height: 80rpx;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	/*  关闭按钮  */
	.close_image {
		position: absolute;
		right: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	/*  表单项  */
	.form_item {
		display: flex;
		align-items: center;
		width: 100%;
		height: 70rpx;
		padding-left: 30rpx;
	}

	.form_item_date {
		width: 100%;
	}

	/*  选择的内容  */
	.picker {
		display: flex;
		align-items: center;

	}

	/*  输入框左边  */
	.item_left {
		width: 100rpx;
		margin-right: 10rpx;
	}

	.input {
		width: calc(100% - 110rpx);
	}

	/*  底部线条  */
	.bottom_line {
		height: 4rpx;
		width: 90%;
		margin-left: 5%;
		background-color: rgb(244, 245, 246);
	}

	/*  提交按钮  */
	.submit_button {
		position: absolute;
		left: 0;
		bottom: 0;
		line-height: 70rpx;
		text-align: center;
		height: 70rpx;
		width: 100vw;
		color: white;
	}
</style>